<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import type { Ref } from "vue";
import { useCounterStore } from "@/stores/counter";
import { getVisitorInfo } from "@/api/visitor";

const router = useRouter();
const useStore = useCounterStore();
// 返回上一页
function onClickLeft() {
  router.push('/my');
}
// 就诊人列表
interface IVisitorList {
  age: number;
  cardid: string;
  gender: string;
  name: string;
  username: string;
}
const visitorList: Ref<IVisitorList[]> = ref([]);
// 挂载后
onMounted(() => {
  getVisitorInfo().then((res) => {
    // console.log(res)
    visitorList.value = res.data.data;
    // console.log('二次加载', visitorList.value)
  });
});
// 添加就诊人
function addVisitor() {
  router.push("/addvisitor");
}
// 修改就诊人
function modifyClick(userId:string) {
  useStore.getUserId(userId)
  router.push("/modifyvisitor");
}
</script>

<template>
  <van-nav-bar
    title="就诊人管理"
    left-text="返回"
    :right-text="visitorList.length + '/4'"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="main">
    <div class="main_box" v-for="item in visitorList" :key="item.username">
      <div>
        <p>
          <strong>{{ item.name + "|" }}</strong>
          <strong>{{ item.gender ? item.gender : "" }}</strong>
        </p>
        <p>身份证 {{ item.cardid }}</p>
        <p>手机号码 {{ item.username }}</p>
      </div>
      <van-icon name="setting" size="50" @click="modifyClick(item.username)" />
    </div>
  </div>
  <van-button type="primary" @click="addVisitor">添加就诊人</van-button>
</template>

<style lang="scss" scoped>
.van-nav-bar {
  background-color: #f7fdff;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  .main_box {
    background-color: #fff;
    padding: 0.1rem;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.15rem;
    box-shadow: 0.03rem 0.03rem 0.1rem #393938;
    margin: 0.05rem 0;
  }
}
.van-button {
  align-self: center;
  width: 50%;
  border-radius: 0.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.4rem;
}
</style>
